<template>
	<view>
		<view style="display: flex;flex-direction: row">
			<view style="width: 150rpx; margin: 10rpx;">
				<u-button @click="addColnum()">增加</u-button>
			</view>
			<view style="width: 150rpx; margin: 10rpx;">
				<u-button @click="delColnum()">删除</u-button>
			</view>
			<view style="width: 150rpx; margin: 10rpx;">
				<u-button @click="submit()">提交</u-button>
			</view>
		</view>

		<view style="width: 200rpx; margin: 10rpx;">
			<uni-easyinput placeholder="表名" v-model="tableName" />
		</view>

		<uni-table style="margin: 10rpx;" ref="table" border stripe type="selection" emptyText="暂无更多数据"
			@selection-change="selectionChange">
			<uni-tr>
				<uni-th align="center">字段名</uni-th>
				<uni-th width="200" align="center">字段类型</uni-th>
				<uni-th align="center">字段长度</uni-th>
				<uni-th width="200" align="center">主键</uni-th>
				<uni-th align="center">备注</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in tableData" :key="index">
				<uni-td align="center">
					<uni-easyinput placeholder="字段名" v-model="item.name" />
				</uni-td>
				<uni-td align="center">
					<uni-data-picker placeholder="字段类型" v-model="item.type" :localdata="types" />
				</uni-td>
				<uni-td align="center">
					<uni-easyinput type="number" placeholder="字段长度" v-model="item.length" />
				</uni-td>
				<uni-td align="center">
					<uni-data-checkbox v-model="item.key" :localdata="key"></uni-data-checkbox>
				</uni-td>
				<uni-td align="center">
					<uni-easyinput placeholder="备注" v-model="item.comment" />
				</uni-td>
			</uni-tr>
		</uni-table>
	</view>
</template>

<script>
	import {
		addTable
	} from '@/api/database/mysql/index.js'
	export default {
		data() {
			return {
				id: '',
				name: '',
				selectedIndexs: 0,
				tableName: '',
				tableData: [],
				key: [{
						value: 0,
						text: '是'
					},
					{
						value: 1,
						text: '不是'
					}
				],
				types: [{
					value: 'int',
					text: 'int'
				}, {
					value: 'char',
					text: 'char'
				}, {
					value: 'varchar',
					text: 'varchar'
				}, {
					value: 'bigint',
					text: 'bigint'
				}]
			}
		},
		onLoad(option) {
			this.id = option.id
			this.name = option.name
		},
		onShow() {
			plus.screen.lockOrientation('landscape-primary');
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: uni.getStorageSync('backgroundColor')
			})
		},
		methods: {
			selectionChange(e) {
				this.selectedIndexs = e.detail.index
			},
			addColnum() {
				this.tableData.push({
					name: '',
					type: '',
					key: 0,
					length: 0,
					comment: ''
				})
			},
			delColnum() {
				for (let selectedIndex of this.selectedIndexs) {
					this.tableData = this.tableData.filter((item, index) => index != selectedIndex)
				}
			},
			submit() {
				this.doAddTable()
			},
			doAddTable() {
				addTable({
					id: this.id,
					name: this.name,
					tableName: this.tableName,
					tableDTOS: this.tableData
				}).then(res => {
					uni.showToast({
						title: '增加表成功',
						icon: 'success'
					})
					
					uni.navigateBack({
						
					})
				})
			}
		}
	}
</script>

<style>

</style>
